<template>
  <view class="flex bg-white rounded-md mb-2" @click="goItineraryPage(route.id)">
    <view class="mr-2 flex-5/12">
      <wd-img :width="143" :height="130" :src="route?.image" radius="6" />
    </view>
    <view class="flex flex-7/12 flex-col justify-around pr-2">
      <view class="flex justify-between">
        <wd-text bold :text="route?.name"></wd-text>
        <wd-tag :type="formatDif(route?.difficulty).type" mark>
          {{ formatDif(route?.difficulty).text }}
        </wd-tag>
      </view>

      <wd-text :text="`预计：${(route?.estimatedTime / 60).toFixed(1)} 小时`"></wd-text>
      <wd-text :text="route?.location"></wd-text>
      <view class="flex justify-between">
        <view class="flex flex-9/12">
          <wd-tag
            plain
            v-for="(str, index) in formatTag(route?.tag)"
            :key="index"
            custom-class="space"
            type="primary"
          >
            {{ str }}
          </wd-tag>
        </view>
        <view class="flex-3/12">{{ route?.distance }} KM</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { RouteVO } from '@/service/route/route'
import { formatTag } from '@/utils/string'
const { route } = defineProps<{ route: RouteVO }>()

const goItineraryPage = (id: number) => {
  uni.navigateTo({
    url: `/pages-sub/itinerary/itinerary?id=${id}`,
  })
}
function formatDif(num: number) {
  const difficultyMap = [
    { type: 'success', text: '简单' },
    { type: 'primary', text: '适中' },
    { type: 'warning', text: '较难' },
    { type: 'danger', text: '困难' },
  ]

  if (difficultyMap[num]) {
    return difficultyMap[num]
  } else {
    return null
  }
}
</script>

<style lang="scss" scoped>
:deep(.space) {
  margin: 0 10px 10px;
}
</style>
